const { resolve } = require('path');
const HtmlWebpackPlugin=require("html-webpack-plugin");
module.exports = { 
	devSever: {
		contentBase: resolve(__dirname, 'build'),
		//开启gzip压缩
		compress: true,
		post: 8080,
		//自动打开浏览器
		open:true
		
	},
	/*
	入口系列，webpack从哪个文件开始打包
	*/
	entry: './src/index.js',
	//输出
	output: {
		//输出的文件名
		filename: 'index.js',
		/*
		输出路径
		resolve：webpack函数，表示解析资源
		__dirname:webpack变量名，表示当前文件的目录绝对路径
		*/
		path: resolve(__dirname,'build')
	},
	//输出配置项，loader配置
	module: {
		//输出规则
		rules: [
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			//打包处理图片使用的loader
			{
				test: /\.(jpg|png|gif)$/,
				//只是一个loader，可以不使用数组use
				loader: 'url-loader',
				//loader的配置项
				options: {
					//表示小于该值得图片都转成base64
					limit: 8 * 1024,
					//关闭es6
					esModule: false,
					//[]表示取值符号，ext表示以什么文件格式压缩就以什么文件格式输出
					name:'[hash:10].[ext]'
				}
			},
			{
				test: /\.html$/,
				loader: "html-loader",
				
			},
			{
				exclude: /\.(html|css|js)$/,
				loader: 'file-loader',
				options: {
					name: '[hash:10].[ext]'
				}
			}
		]
	},
	//插件配置
	plugins: [
		new HtmlWebpackPlugin({
			//表示打包/src/index.html，保留原有HTML的功并将资源引入到html
			template:'./src/index.html'
		})
	],
	//mode配置
	mode:'development' //开发模式
}